<template>
  <div>TestFormDesigner</div>
  <!-- 弹窗：查看动态表单详情 -->
  <el-button round type="primary" @click="handleFormDetail"> 查看动态表单详情 </el-button>
  <Dialog title="动态表单详情" v-model="formDetailVisible" width="800">
    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
  </Dialog>
  <!-- 表单设计器 -->
  <FcDesigner ref="designer" height="780px">
    <template #handle>
      <el-button round size="small" type="primary" @click="handleSave">
        <Icon class="mr-5px" icon="ep:plus" />
        保存
      </el-button>
    </template>
  </FcDesigner>
</template>
<script setup lang="ts" name="TestFormDesigner">
import { encodeConf, encodeFields, setConfAndFields2 } from "@/utils/formCreate";
import { isNullOrUnDef } from "@/utils/is";

const designer = ref(); // 表单设计器
// useFormCreateDesigner(designer) // 表单设计器增强
let conf: string;
let fields: string[];
/** 处理保存按钮 */
const handleSave = () => {
  conf = encodeConf(designer);
  fields = encodeFields(designer);
};

/** 流程表单的详情按钮操作 */
const formDetailVisible = ref(false);
const formDetailPreview = ref({
  rule: [],
  option: {}
});
const handleFormDetail = () => {
  if (isNullOrUnDef(conf) || isNullOrUnDef(fields)) {
    return;
  }
  console.log(conf);
  console.log(fields);
  // 设置表单
  setConfAndFields2(formDetailPreview, conf, fields);
  // 弹窗打开
  formDetailVisible.value = true;
};
</script>

<style scoped></style>
